<template lang="jade">
div
  .return-bar
    i.iconfont(@click="backTo()") &#xe668;
    .limitedname 中秋国庆双重喜,有喜财富送豪礼!
    span.top_right_btn
  .promotion.detail_top
    .section1
      img(src='../../assets/images/promotion/nationalday/nationalday-text.png')
    .section2
      span.process
        div#note.note
            div 已投资:
            {{invest_money}}元
        i#ddt1.ddt1
        i#ddt2.ddt2
        i#ddt3.ddt3
        i#ddt4.ddt4
        em#process(style='height: 0%;')
      a.btn(@click='goLogin', v-show='btn_show ==  false')
        img(src='../../assets/images/promotion/nationalday/nationalday-btn.png')
      img(src='../../assets/images/promotion/nationalday/nationalday-item1.png')
    .section3
      a(@click='goGet')
        img(src='../../assets/images/promotion/nationalday/nationalday-item2.png')
    .section4
      | 奖励发放：
      br
      p
        | 1.投资返现，奖励将在活动结束后一个工作日内发到您的华兴银行投资账户。投资金额大于100万的用户，因华兴银行发放奖励限额。奖励将在活动结束后两个工作日内客服联系提供账号后通过线下转账方式转账。
      p 2.首投送568元现金大奖用户，奖励在投资后一个工作日内发放到您的华兴银行投资账户。
      p 本活动解释权归深圳市有喜资产管理有限公司所有，如有疑问请致电400 678 8080

</template>

<script>
import '../../assets/sass/pro/nationalday.scss'
import {c_promotion_nationalday} from '../../config/api'

export default {

    data(){
        return {
            toast_show:false,
            btn_show:false,
            invest_money:100,
            ddtClass:[0, 0, 0, 0]
        }
    },

    methods: {
        backTo(){
          this.$route.router.go('/')
          //window.history.back();
        },
        goLogin(){
            this.$route.router.go('/login?from=promotion/nationalday');
        },
        goGet(){
            this.$route.router.go('/invest/index?productype=current');
        },

        fetch(){
            var that = this
            this.$store.dispatch('setShowLoading', true);

            this.$http({url:c_promotion_nationalday, methods:'GET'}).then(function(rep){
                this.$store.dispatch('setShowLoading', false);


                var rs = rep.data, money = 0, percent = 0;
                this.btn_show = rs.login_status;


                money = parseInt(rs.money);


                //money = 37500;


                if( money >= 50000 ){
                    percent = 8;

                    document.getElementById("ddt1").className="ddt1 on";
                }else if( money < 50000 )
                    percent = money / 50000 * 100 * 0.08;


                if( money >= 200000 ){
                    percent = 36;
                    document.getElementById("ddt1").className="ddt1 on";
                    document.getElementById("ddt2").className="ddt2 on";

                }else if( money < 200000 && money > 50000 ){
                    //percent = 11 + ( (money-50000) / 200000 * 100 * 0.36);
                    document.getElementById("ddt1").className="ddt1 on";
                    percent = 8 + (money - 50000) / (200000 - 50000) * 100 *  (36 - 8) / 100;
                }



                if( money >= 500000 ){
                    percent = 63;

                    document.getElementById("ddt1").className="ddt1 on";
                    document.getElementById("ddt2").className="ddt2 on";
                    document.getElementById("ddt3").className="ddt3 on";

                }else if( money < 500000 && money > 200000 ){
                    //percent = money / 500000 * 100 * 0.62;
                    document.getElementById("ddt1").className="ddt1 on";
                    document.getElementById("ddt2").className="ddt2 on";
                    console.log('money >= 500000')
                    percent = 36 + (money - 200000) / (500000 - 200000) * 100 *  (63 - 36) / 100;
                }

                if( money >= 1000000 ){
                    percent = 90;


                    document.getElementById("ddt1").className="ddt1 on";
                    document.getElementById("ddt2").className="ddt2 on";
                    document.getElementById("ddt3").className="ddt3 on";
                    document.getElementById("ddt4").className="ddt4 on";
                    //document.getElementsByClassName('dddd').className="dot4 on";
                }else if( money < 1000000 && money > 500000 ){
                    //percent = money / 1000000 * 100 * 0.87;
                    document.getElementById("ddt1").className="ddt1 on";
                    document.getElementById("ddt2").className="ddt2 on";
                    document.getElementById("ddt3").className="ddt3 on";
                    console.log('money >= 1000000')
                    percent = 62 + (money - 500000) / (1000000 - 500000) * 100 *  (90 - 62) / 100;
                }

                if( money >= 1500000 ){
                    percent = 100;

                    document.getElementById("ddt1").className="ddt1 on";
                    document.getElementById("ddt2").className="ddt2 on";
                    document.getElementById("ddt3").className="ddt3 on";
                    document.getElementById("ddt4").className="ddt4 on";

                }else if( money < 1500000 &&  money > 1000000 ){
                    document.getElementById("ddt1").className="ddt1 on";
                    document.getElementById("ddt2").className="ddt2 on";
                    document.getElementById("ddt3").className="ddt3 on";
                    document.getElementById("ddt4").className="ddt4 on";
                    percent = 90 + (money - 1000000) / (1500000 - 1000000) * 100 *  (100 - 90) / 100;
                }


                console.log(percent)
                console.log(this.ddtClass)
                this.invest_money = money;
                setTimeout(function(){
                    var obj = document.getElementById("process");
                    obj.style.height = percent+'%';

                    if(that.btn_show){
                        document.getElementById("note").style.top = (100-percent+2)+'%';
                        document.getElementById("note").style.opacity = 1;
                    }

                }, 1000)


            });
        }

    },

    route: {
        activate ( transition ) {

            transition.next();
            this.fetch();
        }
    }
}
</script>
